<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>短租规则管理</title>
  <link rel="stylesheet" href="css/normalize.css" />
  <!-- font-awesome -->
  <link rel="stylesheet" href="css/font-awesome.css">
  <!-- layui-CSS -->
  <link rel="stylesheet" href="js/layui/css/layui.css">
  <!-- 页面主样式 -->
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/stylexu.css" />

  <script src="js/echarts.min.js"></script>

  <style type="text/css">
    .layui-form-radio span {
      display: none;
    }

    .layui-form-radio i {
      margin-right: -20px;
    }

    #checkedAll {
      cursor: pointer;
    }

    table {
      border: none;
    }

    .layui-top-bd .layui-top-second .layui-input-inline {
      width: 200px;
    }
  </style>
  <!-- content样式指定 -->
  <link rel="stylesheet" href="css/content-orderdetail.css" />
</head>

<body>
  <div class="layui-layout layui-layout-admin">

    <div class="layui-side layui-bg-black">

      <div class="layui-side-scroll">

        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-vcard"></i><cite>会员管理</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;">微信群发</a>
              </dd>
              <dd>
                <a href="javascript:;">文章管理</a>
              </dd>
              <dd>
                <a href="javascript:;">新建文章</a>
              </dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-anchor"></i><cite>车辆审核</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;">经销商数据</a>
              </dd>
              <dd>
                <a href="javascript:;">全国平均数据</a>
              </dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-anchor"></i><cite>区域后台-统计管理</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;" class="menu_three ">停车统计</a>
                <ol class="layui-nav-child" style="display: none;">
                  <li><a href="javascript:;">停车日志</a></li>

                </ol>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <div style="padding:20px;padding-top:0px;">
        <!-- 头 -->
        <div style="margin-top: 20px;margin-bottom: 20px;color: #333333;">
          <div style="margin-bottom: 10px;">
            <span style="font-size: 20px;font-weight: 800;">订单详情</span>
          </div>
          <hr>
        </div>
        <!-- 订单详细 -->
        <div class="layui-row">
          <div id="blue-orders" class="layui-col-md12 top">
            <div class="orderInformation">

              <div class="layui-row">
                <div class="layui-col-md12">
                  <span style="font-size: 16px;">订单信息</span>
                </div>
              </div>

              <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                  <span>订单号：</span>
                  <span>02022109090000003</span>
                </div>
                <div class="layui-col-md4">
                  <span>订单开始时间：</span>
                  <span>2021-09-09 17:53:25</span>
                </div>
                <div class="layui-col-md4">
                  <span>订单结束时间：</span>
                  <span>2021-09-09 18:54:26</span>
                </div>
              </div>
              <hr>
              <div class="layui-row">
                <div class="layui-col-md12">
                  <span style="font-size: 16px;">会员信息</span>
                </div>
              </div>

              <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                  <span>姓名：</span>
                  <span>付小小</span>
                </div>
                <div class="layui-col-md4">
                  <span>电话：</span>
                  <span>18100000000</span>
                </div>
                <div class="layui-col-md4">
                  <span>身份证号：</span>
                  <span>110250199205165539</span>
                </div>
              </div>
              <hr>
              <div class="layui-row">
                <div class="layui-col-md12">
                  <span style="font-size: 16px;">车辆信息</span>
                </div>
              </div>

              <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                  <span>车牌号：</span>
                  <span>吉A9M37A</span>
                </div>
                <div class="layui-col-md4">
                  <span>底盘号：</span>
                  <span>LFVNA90KXK6501205</span>
                </div>
                <div class="layui-col-md4">
                  <span>品牌：</span>
                  <span>一汽-大众</span>
                </div>
              </div>

              <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                  <span>车系：</span>
                  <span>宝来纯电</span>
                </div>
                <div class="layui-col-md4">
                  <span>车型：</span>
                  <span>尚</span>
                </div>
              </div>

            </div>
          </div>
        </div>

        <!-- 订单详细信息 -->
        <div class="layui-row">
          <div id="blue-orders" class="layui-col-md12 blue">
            <div>
              <span>订单详细信息</span>
            </div>
          </div>
        </div>

        <div id="order-information" class="layui-row order-information">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space10">

              <div class="layui-col-md4 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md5 inside-order-information-1">
                    <span>订单里程</span>
                  </div>
                  <div class="layui-col-md7 inside-order-information-2">
                    <span>12.4km</span>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md5 inside-order-information-1">
                    <span>怠速时长</span>
                  </div>
                  <div class="layui-col-md7 inside-order-information-2">
                    <span>10分20秒</span>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md5 inside-order-information-1">
                    <span>油耗</span>
                  </div>
                  <div class="layui-col-md7 inside-order-information-2">
                    <span>6.3L/100km</span>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md5 inside-order-information-1">
                    <span>忘记还车次数</span>
                  </div>
                  <div class="layui-col-md7 inside-order-information-2">
                    <span>2次</span>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md5 inside-order-information-1">
                    <span>疲劳驾驶</span>
                  </div>
                  <div class="layui-col-md7 inside-order-information-2">
                    <span>否</span>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md5 inside-order-information-1">
                    <span>违章次数</span>
                  </div>
                  <div class="layui-col-md7 inside-order-information-2">
                    <span>0次</span>
                  </div>
                </div>
              </div>

              <div class="layui-col-md12 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md3 inside-order-information-1">
                    <span>取车地</span>
                  </div>
                  <div class="layui-col-md9 inside-order-information-2">
                    <span>吉林省长春市绿园区普阳街3333号</span>
                  </div>
                </div>
              </div>
              <div class="layui-col-md12 inside-order-information">
                <div class="layui-row">
                  <div class="layui-col-md3 inside-order-information-1">
                    <span>还车地</span>
                  </div>
                  <div class="layui-col-md9 inside-order-information-2">
                    <span>吉林省长春市绿园区普阳街5333号</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <div class="layui-row layui-col-space20">
          <div class="layui-col-md6">
            <div class="speed">
              <div class="speed-top-div">
                <span>速度（km/h）</span>
                <i class="fa fa-arrows-alt"></i>
                <i class="fa fa-file-excel-o"></i>
              </div>
              <div id="order-speed" class="speed-chart"></div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="speed">
              <div class="speed-top-div">
                <span>怠速（分钟）</span>
                <i class="fa fa-arrows-alt"></i>
                <i class="fa fa-file-excel-o"></i>
              </div>
              <div id="order-idling" class="speed-chart"></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- 价格弹出结束 -->
  <!-- 编辑价格弹出开始 -->

  <!-- 价格弹出结束 -->
  <!-- jQuery -->
  <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
  <!-- layui-JS -->
  <script type="text/javascript" src="./js/layui/layui.js"></script>
  <script type="text/javascript" src="./js/MobilityCarprice.js"></script>
  <script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer', 'upload'], function () {
      $(".menu_three").on("click", function () {

        $(this).next().toggle();
        $.each($(this).parent().siblings(), function (i, e) {
          $(e).find("ol").hide();;
        });

      })
      $("ol").on("click", "li a", function () {
        $.each($(this).parent().siblings(), function (i, e) {
          $(e).find("a").removeClass('three_this')
        });
        $(this).addClass('three_this'); // 添加当前元素的样式
      })

      var form = layui.form,

        layer = layui.layer,
        layedit = layui.layedit,
        laydate = layui.laydate,
        form2 = layui.form,
        upload = layui.upload;
      var laypage = layui.laypage,
        layer = layui.layer;
      //显示分页
      var page_page = $("#page_page").val();
      var page_current = $("#page_current").val();
      var page_href = $("#page_href").val();
      var page_status = $("#status").val();
      var page_ruleName = $("#ruleName").val();

      laypage.render({
        elem: 'pageDemo',
        count: page_page,
        curr: page_current || 1, //当前页
        skip: true, //是否开启跳页
        skin: '#586683', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
        theme: '#4B74FF',
        limit: 30,
        groups: 7, //连续显示分页数
        // 			layout: ['count', 'prev', 'page', 'next','skip'],
        layout: ['page'],
        jump: function (obj, first) {
          if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
            if (page_href.indexOf("?") > 0) {
              page_href += "&pageon=" + obj.curr + "&ruleStatus=" + page_status + "&ruleName=" + page_ruleName
            } else {
              page_href += "?pageon=" + obj.curr + "&ruleStatus=" + page_status + "&ruleName=" + page_ruleName
            }
            window.location.href = encodeURI(page_href);
          }
        }
      });
      // 日历渲染
      laydate.render({
        elem: '#rili1',
        range: true //或 range: '~' 来自定义分割字符
      });
    });

  </script>
  <script src="js/charts-orderdetail.js"></script>

</body>

</html>